<template>
  <!-- 点赞文章按钮 -->
 <van-icon
    :color="attitude===1 ? 'red' : '#777'"
    :name="attitude===1 ? 'good-job' : 'good-job-o'"
    @click="changeFollowed"
  />
</template>

<script>
import { addLikeAPI, deleteLikeAPI } from '../api/index.js'
export default {
  name: 'likeArticle',
  props: {
    attitude: { // 用户对文章的态度 -1:无态度, 0:不喜欢, 1:点赞
      type: Number,
      default: -1
    },
    artId: { // 文章id
      type: String,
      default: ''
    }
  },
  data () {
    return {
      btnLoading: false // 收藏加载状态
    }
  },
  methods: {
    // 改变文章关注状态
    async changeFollowed () {
      // 此时表示已有改变状态事件, 不允许做任何操作
      if (this.btnLoading) return
      // 触发改变状态,开启加载状态变量
      this.btnLoading = true
      try {
        if (this.attitude === 1) {
        // 点赞 => 取消点赞
          await deleteLikeAPI(this.artId)
        } else {
        // 未点赞 => 点赞
          await addLikeAPI(this.artId)
        }
        // 让父组件去完成关注状态的变化
        this.$emit('update:attitude', this.attitude === 1 ? -1 : 1)
        this.$toast(this.attitude === 1 ? '取消点赞成功' : '文章点赞成功')
      } catch (error) {
        console.log(error)
        if (error.response && error.response.status === 400) {
          this.$toast('你不能收藏你自己')
        } else {
          this.$toast('操作失败,请稍后再试')
        }
      }
      // 触发状态事件执行完毕, 关闭架子啊状态
      this.btnLoading = false
    }
  }
}
</script>

<style lang="less" scoped>

</style>
